<template>
  <div class="search_box">
    <input type="text" v-model.trim="text" autofocus placeholder="搜索用户文章 ...">
  </div>
</template>

<script>
import { searchArticleByTitle } from 'com/shuju'
export default {
  name: 'ArticleSearch',
  data () {
    return {
      text: ''
    }
  },
  watch: {
    text () {
      const data = new FormData()
      data.set('title', this.text)
      data.set('size', 9)
      data.set('page', 0)
      data.set('username', this.$route.query.name)
      searchArticleByTitle(data, this)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .search_box{
    position: absolute
    top: 50px
    left: 300px
    width: 900px
    height: 50px
    background-color: green
    input{
      width: 100%
      height: 100%
      font-size: .35rem
      outline: none
      color: rgb(100,100,100)
      box-sizing: border-box
      padding: .15rem
    }
  }
</style>
